const { loadModule } = window['vue3-sfc-loader'];
const loadModuleOptions = {
  moduleCache: { vue: Vue },
  async getFile(url) {
    url = url + '?' + Date.now();
    const res = await fetch(url);
    if ( !res.ok )
      throw Object.assign(new Error(res.statusText + ' ' + url), { res });
    return await res.text();
  },
  addStyle(textContent) {
    const style = Object.assign(document.createElement('style'), { textContent });
    const ref = document.head.getElementsByTagName('style')[0] || null;
    document.head.insertBefore(style, ref);
  },
}

const Avatar = {
  computed: {
    /** 获取当前激活的视图名称 */
    activedView() {
      return this.$store.state.activedView;
    }
  },
  /** 根据测试结果，纯浏览器端貌似不支持vue文件嵌套 */
  components: {
    'nav-bar': Vue.defineAsyncComponent(() => loadModule('component/MenuNavBar.vue', loadModuleOptions)), 
    'tab-bar': Vue.defineAsyncComponent(() => loadModule('component/MenuTabBar.vue', loadModuleOptions)), 
    'over-view': Vue.defineAsyncComponent(() => loadModule('component/ViewOverview.vue', loadModuleOptions)), 
    'avatar-edit': Vue.defineAsyncComponent(() => loadModule('component/ViewAvatarEdit.vue', loadModuleOptions)), 
    'action-edit': Vue.defineAsyncComponent(() => loadModule('component/ViewActionEdit.vue', loadModuleOptions)), 
    'option-edit': Vue.defineAsyncComponent(() => loadModule('component/ViewOption.vue', loadModuleOptions)),
  },
  mounted() {
    this.$store.dispatch('changeLanguage'); // 初始化语言
    this.$store.commit('initResItem'); // 初始化素材资源对象
    this.$store.commit('initActItem'); // 初始化动作部件对象
    this.$store.commit('initCanvas', 'painter'); // 初始化画布对象
    console.log('app mounted', this, this.$store.state);
  },
  methods: {
  }
}

const app = Vue.createApp(Avatar)
  .use(store)
  .use(vant)
  .mount('#app');
